import React, { createContext, useState, useEffect, useRef } from 'react';
import { Toast } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import ListItem from '@/components/ListItem';
import { validatenull } from "@/utils/validate";
import { listFieldsSearch } from '../_parts/const';
import ApiIndex from '@/api/index'
import "./index.less"

import { MyContext } from '@/context/index';
const { Provider } = MyContext

function Index ({ history }) {
    const [inputVal, setInputVal] = useState('');
    const [List, setList] = useState([]); //列表
    const [ListRow, setListRow] = useState({});
    const ModalSpareRef = useRef(null)
    // 搜索
    const sendHandlePressVal = (value) => {
        if (validatenull(value)) return
        setInputVal(value)
        let _value = value
        if (value.indexOf("*") != -1) {
            _value = value.split("*")[0]
        }

        handleDebounce(_value)
    }
    const handleDebounce = (value) => {
        ApiIndex.searchByParam({ param: value }).then(res => {
            const result = res.data
            if (result.code == 0 && Object.keys(result.data || {})?.length) {
                setInputVal('')
                setList(result.data)

                // let row = {
                //     ...result.data,
                //     stockNumber: result.data.number,
                // }
                // setListRow(row)
                // setInputVal('')
                // List.push(row)
                // setList([...List])
            } else {
                setList([])
                Toast.show({
                    content: '暂无匹配数据',
                })
            }
        })
    }

    return (
        <div className='page-wrapper'>
            <Provider value={{ placeholderTxt: "请扫描备件条码", inputVal: inputVal }}>
                <HeadTop
                    title="位置查询"
                    history={history}
                    search={true}
                    sendHandlePressVal={sendHandlePressVal}
                ></HeadTop>
            </Provider>
            <div className="page-body">
                {
                    List.length > 0 ?
                        List.map(el => <ListItem
                            key={el.toolCode}
                            item={el}
                            history={history}
                            listFields={listFieldsSearch}
                        ></ListItem>)
                        : <div className='no-list-data'>
                            无更多数据
                        </div>
                }
            </div>
        </div>
    );
}

export default Index;
